<template>
  <div class="vip-wrap">
    <el-form>
      <el-form-item>
        <span>请选择会员等级：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <tinymce ref="editor" :height="500" v-model="content"/>
    </div>
    <el-row class="row">
      <el-button type="primary" @click="handleSubmit">确认</el-button>
      <el-button plain @click="handleReset">重置</el-button>
    </el-row>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { updateStyle, listStyle, detailContent } from '@/api/data'
export default {
  name: 'BasicVip',
  components: {
    Tinymce
  },
  data() {
    return {
      content: '',
      arrId: ['3ae47d42e21d4b1eb3f70fc76e0c9642', '15e87c1229d140b3b621a91fb5a0231b', '7f3f46d282fc46ec8707ee905a17cf62', '2fe4a25b57904596936002ebb34cfef9'],
      value: '代理商',
      id: '',
      options: [
        {
          value: '选项一',
          label: '普通会员'
        },
        {
          value: '选项二',
          label: '服务商'
        },
        {
          value: '选项三',
          label: '区域服务商'
        },
        {
          value: '选项四',
          label: '代理商'
        }
      ]
    }
  },
  created() {
    this.getList()
    this.getDetail()
  },
  methods: {
    handleSubmit() {
      const generalVip = {
        content: '普通会员',
        id: '3ae47d42e21d4b1eb3f70fc76e0c9642'
      }
      const facilitator = {
        content: '服务商',
        id: '15e87c1229d140b3b621a91fb5a0231b'
      }
      const areaFacilitator = {
        content: '区域服务商',
        id: '7f3f46d282fc46ec8707ee905a17cf62'
      }
      const agencyFacilitator = {
        content: '代理商',
        id: '2fe4a25b57904596936002ebb34cfef9'
      }
      const { value, content } = this
      const title = value
      switch (value) {
        case generalVip.content:
          this.fixContent(title, content, generalVip.id)
          break
        case facilitator.content:
          this.fixContent(title, content, facilitator.id)
          break
        case areaFacilitator.content:
          this.fixContent(title, content, areaFacilitator.id)
          break
        case agencyFacilitator.content:
          this.fixContent(title, content, agencyFacilitator.id)
          break
        default:
          break
      }
    },
    fixContent(title, content, id) {
      updateStyle(title, content, id)
        .then((res) => {
          this.$message.success({
            message: '修改成功',
            duration: 1000
          })
        }).catch((e) => {
          this.$message.info({
            message: '请稍后再试',
            duration: 1000
          })
        })
    },
    getList() {
      const title = this.value
      // const code = 'agencyFacilitator'
      listStyle(0, 10, title)
        .then((res) => {
          console.log(res)
        })
    },
    getDetail() {
      const id = '2fe4a25b57904596936002ebb34cfef9'
      detailContent(id)
        .then((res) => {
          console.log(res)
        })
    },
    handleReset() {
      this.content = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.vip-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .row {
    padding-top: 20px;
    box-sizing: border-box;
  }
}
</style>
